<style type="text/css">
    .wrapper {
        position: relative;
        height: 100%;
        width: 100%;
    }

    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background: #fff;
    }

    #loader {
        background: url('http://img.zcool.cn/community/01909155a905dc32f875495ea197c9.gif') 50% 50% no-repeat #fff;
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
        z-index: 1001;
    }

    .loaded #loader {
        opacity: 0;
    }

    .loaded #loader-wrapper {
        display: none;
    }
</style>
<div class="wrapper" id="load" style="opacity: 0.8;z-index: 12;">
    <div id="loader-wrapper">
        <div id="loader"></div>
    </div>
</div>
<script>
    var s = document.getElementById("load");
    s.style.display = 'none';
</script>